<template>
    <el-form
        :inline="true"
        :model="application_query"
        class="demo-form-inline"
    >
        <el-form-item label="课程ID">
            <el-input
                v-model="application_query.lectureId"
                placeholder="请输入ID"
                clearable
            />
        </el-form-item>
        <el-form-item label="课程名">
            <el-input
                v-model="application_query.lectureName"
                placeholder="请输入名称"
                clearable
            />
        </el-form-item>
        <el-form-item label="学员名">
            <el-input
                v-model="application_query.name"
                placeholder="请输入名称"
                clearable
            />
        </el-form-item>
        <el-form-item>
            <el-button
                type="primary"
                @click="onQuery"
            >查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button
                type="primary"
                @click="onReload"
            >重置</el-button>
        </el-form-item>
    </el-form>
    <el-table
        :data="dataList.comList"
        style="width: 100%"
    >
        <el-table-column
            label="签到"
            width="80"
        >
            <template #default="scope">
                <el-checkbox
                    v-model="scope.row.isChecked"
                    @change="handleSigninChange(scope.row)"
                ></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column
            label="领取材料"
            width="80"
        >
            <template #default="scope">
                <el-checkbox
                    v-model="scope.row.isObtainedMaterial"
                    @change="handleGetMaterialChange(scope.row)"
                ></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column
            label="缴费"
            width="80"
        >
            <template #default="scope">
                <el-checkbox
                    v-model="scope.row.isPay"
                    @change="handlePayChange(scope.row)"
                ></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column
            label="ID"
            prop="id"
        />
        <el-table-column
            label="学员名"
            prop="name"
        />
        <el-table-column
            label="课程名"
            prop="lectureName"
        />
        <el-table-column
            label="课程ID"
            prop="lectureId"
        />
    </el-table>
    <el-pagination
        @current-change="currentChange"
        @size-change="sizeChange"
        background
        layout="prev, pager, next"
        :total="selectData.count"
        :default-page-size="selectData.pagesize"
    />
</template>
  
<script lang="ts">
import {
    inject, reactive,
    onMounted, computed, toRefs, ref
} from "vue";
import { ElTable } from 'element-plus'
import { application_query, ApplicationData, ApplicationListData } from "@/utils/staff_ApplicationValidators"
export default {
    setup() {
        const axios = inject('axios');
        const data = reactive(new ApplicationListData());
        const curRow = ref<ApplicationData>();

        onMounted(() => {
            getApplicationData();
        });

        const getApplicationData = () => {
            //@ts-ignore
            axios.get("/api/registrationForm/queryList",
                {
                    params: {

                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200) {
                        data.ApplicationList = res.data.data;
                        data.selectData.count = res.data.data.length;
                    } else {
                        alert("未请求到\"报名表\"信息");
                    }
                });
        };

        const dataList = reactive({
            comList: computed(() => {
                return data.ApplicationList.slice(
                    (data.selectData.page - 1) * data.selectData.pagesize,
                    data.selectData.page * data.selectData.pagesize
                );
            }),
        });

        const currentChange = (page: number) => {
            data.selectData.page = page;
        };
        const sizeChange = (pagesize: number) => {
            data.selectData.pagesize = pagesize;
        };

        interface QParams {
            companyName?: string;
            lectureName?: string;
            lectureId?: string;
            name?: string;
        }

        const onQuery = () => {
            const { lectureId, lectureName, name, companyName } = application_query;
            let q_params: QParams = {};
            var allowQuery = false;
            if (lectureId != "" && /^[0-9]*$/.test(lectureId)) {
                q_params.lectureId = lectureId;
                allowQuery = true;
            }
            if (lectureName != "") {
                q_params.lectureName = lectureName;
                allowQuery = true;
            }
            if (companyName != "") {
                q_params.companyName = companyName;
                allowQuery = true;
            }
            if (name != "") {
                q_params.name = name;
                allowQuery = true;
            }
            if (allowQuery) {
                //@ts-ignore
                axios.get("/api/registrationForm/queryList",
                    {
                        params: q_params
                        //@ts-ignore
                    }).then((res) => {
                        if (res.status === 200) {
                            data.ApplicationList = res.data.data;
                            data.selectData.count = res.data.data.length;
                        } else {
                            alert("未请求到\"报名表\"信息");
                        }
                    });
            }
        };

        const handleSigninChange = (row: ApplicationData) => {
            //@ts-ignore
            axios.put("/api/registrationForm/update",
                {
                    "id": row.id,
                    "isChecked": row.isChecked,
                }, {
                    headers: { 'Content-Type': 'application/json' }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        
                    }
                });
        };
        const handleGetMaterialChange = (row: ApplicationData) => {
            //@ts-ignore
            axios.put("/api/registrationForm/update",
                {
                    "id": row.id,
                    "isObtainedMaterial": row.isObtainedMaterial,
                }, {
                    headers: { 'Content-Type': 'application/json' }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        
                    }
                });
        };
        const handlePayChange = (row: ApplicationData) => {
            //@ts-ignore
            axios.put("/api/registrationForm/update",
                {
                    "id": row.id,
                    "isPay": row.isPay,
                }, {
                    headers: { 'Content-Type': 'application/json' }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {

                    }
                });
        };

        const onReload = () => {
            location.reload();
        }

        return {
            ...toRefs(data), application_query, dataList, onQuery, currentChange, sizeChange,
            curRow, handleSigninChange, handleGetMaterialChange, handlePayChange, onReload, 
        }
    }
}
</script>
  